<template>
    <div class="content">

     
        <el-row>
            <el-col :span="24">
                <div class="bg-purple-dark">
                    {{ system.YQDA_SYSTEM_NAME }}
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20" style="padding: 0 20px;width: 100%;position: absolute; top: 11%;">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-row>
                        <el-col :span="24">
                            <div class="main-onlineNumber grid-content">
                                <div class="main-onlineNumber-conter">
                                    <div id="onlineNumber" style="width:430px; height:300px;    position: relative;"></div>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="24">
                            <div class="main-storeRoomNumber grid-content">
                                <div class="main-storeRoomNumber-conter">
                                    <div id="storeRoomNumber" style="width:430px; height:280px;    position: relative;">
                                    </div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="10">
                    <h3 style="color:#1cacd3;font-weight: bold; font-size:21px;margin-top:38px">青海交控集团档案信息驾驶舱</h3>
                    <div class="main-Archive">
                        <div>
                            <img src="../assets/images/jsclogo.png" />
                         
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <el-row>
                        <el-col :span="24">
                            <div class="main-information grid-content ">
                                <div class="main-information-conter">
                                    <div id="information" style="width:580px; height:260px;    position: relative;"></div>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="24">
                            <div class="main-statistics grid-content">
                                <div class="main-statistics-conter">
                                    <div style="position: absolute;top:5px;right:0px;z-index: 1;">
                                        <el-select v-model="type" placeholder="请选择" @change="onChangeTap">
                                            <el-option label="最近七天" value="day"></el-option>
                                            <el-option label="最近六个月" value="month"></el-option>
                                        </el-select>
                                    </div>
                                    <div id="statistics" style="width:580px; height:320px;    position: relative;"></div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
            <el-row :gutter="20">

                <el-col :span="8">
                    <div class="main-gdtj  grid-content">
                        <div class="main-gdtj-conter">
                            <div id="gdtj" style="width:580px; height:400px; position: relative;"></div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="main-stockNums grid-content">
                        <div class="main-stockNums-conter">
                            <div id="stockNums" style="width:430px; height:400px; position: relative;"></div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="10">
                    <div class="main-dayj grid-content">
                        <div class="main-dayj-conter">
                            <div id="dayj" style="width:730px; height:400px; position: relative;"></div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </el-row>

    </div>
</template>
<script>
import { systemName } from "@/api/login";
import * as echarts from "echarts";
import { updateRedisData, onlineNum, storeRoomNums, digitalStatisticsNums, utilizingStatisticsNums, stockNums, archiveFileNums, archiveFileNums2, handOverReceiveNums, receptionNums, handOverReceiveNumsByYear, receptionNumsByYear } from "@/api/cockpit.js"
export default {
    data() {
        return {
            type: 'month',
            system: "",
            onlineNumList: [],
            storeRoomNumList: [],
            informationNumList: [],
            utilizingStatisticsNumList: [],
            dataList: [],
            stockNumsList: [],
            archiveFileNumsList: [],
            dayjList: []

        }
    },
    created() {
        //时间表掉接口
        var that = this;
        onlineNum().then(res => {//在线人数接口POST
            var dataArr = [];
            for (var i in res.data.data) {
                var iarr = [];
                iarr.push([res.data.data[i].num, res.data.data[i].tenantName, 1])

                dataArr.push(iarr[0])
            }
            var titleArr = [
                "Income",
                "Country",
                "Year",
            ];
            this.onlineNumList = [
                titleArr, // 标题行  
                ...dataArr // 展开b中的数组，作为数据行  
            ];
            this.onlineNumber(); //在线人数echars
        })
        //登陆标题
        systemName().then(res => {
            this.system = res.data;
        })
        that.postALLs();
    },
    beforeDestroy() {
        // console.log("页面销毁后")
        clearInterval(); // 清除定时器
    },
    methods: {

        //说有echars 数据接口
        postALLs() {
            setTimeout(res => {


                storeRoomNums().then(res => { //库房管理数据展示POST
                    var seriesData = [];
                    var legendData = [];
                    for (var i in res.data) {
                        legendData.push(res.data[i].tenantName)
                        seriesData.push({
                            value: res.data[i].num,
                            name: res.data[i].tenantName
                        })
                    }

                    this.storeRoomNumList = {
                        seriesData: seriesData,
                        legendData: legendData
                    };
                    this.storeRoomNumber(); //库房管理数据展示echars
                })

                digitalStatisticsNums().then(res => {//档案数字化统计展示POST

                    var szhNums = [];
                    var wszhNums = [];
                    var xAxisArr = [];
                    for (var i in res.data) {
                        szhNums.push(parseFloat(res.data[i].szhNum));
                        wszhNums.push(parseFloat(res.data[i].wszhNum));
                        xAxisArr.push(res.data[i].tenantName)
                    }
                    var rowData = [szhNums, wszhNums]
                    this.informationNumList = {
                        xAxisArr: xAxisArr,
                        rowData: rowData
                    }
                    this.information(); //档案数字化统计展示echars
                })

                this.utilizingStatisticsNumsPost(); //利用情况统计
                stockNums().then(res => {//档案情况展示POST
                    var xAxis = [];
                    var juanNums = [];
                    var jianNums = [];
                    for (var i in res.data) {
                        xAxis.push(res.data[i].tenantName);
                        juanNums.push(res.data[i].juanNum);
                        jianNums.push(res.data[i].jianNum);
                    }
                    this.stockNumsList = {
                        xAxis: xAxis,
                        juanNums: juanNums,
                        jianNums: jianNums
                    }
                    this.stockNums(); //档案情况展示
                })

                archiveFileNums2().then(res => { //电子档案归档饼状图POST
                    res.data.time.unshift("product")
                    for (var i in res.data.time) {
                        res.data.time[i] = res.data.time[i] + ""
                    }
                    var series = [];
                    for (var i in res.data.data) {
                        series.push({
                            type: 'line',
                            smooth: true,
                            seriesLayoutBy: 'row',
                            emphasis: { focus: 'series' }
                        })

                    }
                    console.log(series,"shuju")
                    series.push({
                        type: 'pie',
                        id: 'pie',
                        radius: '30%',
                        top: 78,
                        center: ['50%', '16%'],
                        emphasis: {
                            focus: 'self'
                        },
                        label: {
                             formatter: '{b}: {@' + res.data.time[1] + '} ({d}%)'
                            // formatter:'{b}: {d}%'
                        },
                        encode: {
                            itemName: 'product',
                            value: res.data.time[1],
                            tooltip: res.data.time[1]
                        }
                    })


                    var datas = [
                        res.data.time,// 展开b中的数组，作为数据行  
                        ...res.data.data, // 标题行  
                    ];
                    this.archiveFileNumsList = {
                        series: series,
                        datas: datas
                    }

                    console.log(this.archiveFileNumsList,"电子档案归档统计")
                    this.gdtj();//电子档案归档统计
                })



                handOverReceiveNums().then(res => {//移交统计

                    var downloadJson = {}
                    for (var i in res.data.data) {
                        downloadJson[res.data.data[i].name] = res.data.data[i].val
                    }
                    //    console.log(res.data.data, downloadJson,"移交统计")
                    receptionNums().then(res1 => { //接收统计
                        var themeJson = {}
                        for (var i in res1.data.data) {
                            themeJson[res1.data.data[i].name] = res1.data.data[i].val
                        }
                        // console.log(res1,"接收统计")
                        handOverReceiveNumsByYear().then(res2 => { //移交统计按年度
                            var charts = {}
                            for (var i in res2.data) {
                                charts[res2.data[i].name] = res2.data[i].num
                            }
                            // console.log(res2.data,charts,"移交统计按年度")
                            receptionNumsByYear().then(res3 => { //接收统计按年度
                                var components = {}
                                for (var i in res3.data) {
                                    components[res3.data[i].name] = res3.data[i].num
                                }

                                this.dayjList = {
                                    downloadJson: downloadJson,
                                    themeJson: themeJson,
                                    charts: charts,
                                    components: components

                                }
                                // console.log(res3,components, "接收统计按年度")
                                this.dayj(); //档案移交接收数据统计展示
                            })
                        })
                    })

                })




            })
        },




        //下拉
        onChangeTap() {
            this.dataList = []
            this.utilizingStatisticsNumsPost();
        },
        //7月青海交控利用情况统计POST
        utilizingStatisticsNumsPost() {
            utilizingStatisticsNums({ type: this.type }).then(res => { //7月青海交控利用情况统计POST
                for (var i in res.data.zhxtData) {

                    this.dataList.push(i)
                }

                // 对数组进行日期排序  
                this.dataList.sort(function (a, b) {
                    // 将字符串转换为Date对象  
                    var dateA = new Date(a);
                    var dateB = new Date(b);

                    // 比较两个日期  
                    return dateA - dateB; // 升序排序  
                    // 如果需要降序排序，则交换 dateA 和 dateB 的位置或返回 dateB - dateA  
                });
                this.utilizingStatisticsNumList = res.data
                this.statistics(); //7月青海交控利用情况统计
            })
        },
        //在线人数
        onlineNumber() {
            var that = this;
            var chartDom = document.getElementById('onlineNumber');
            var myChart = echarts.init(chartDom, 'dark');
            //echarts图像绘制完成之后，通过js找到canvas对象，设置宽高
            // var canvasElement = chartDom.querySelector("div");
            // // 检查是否找到了<canvas>元素  
            // if (canvasElement) {

            //     // 设置<canvas>的宽度  
            //     canvasElement.style.width = 500 + "px"; // 设置为你需要的宽度值
            //    // $canvas.style.width = 700 + "px";
            //     // 如果你还想设置高度，可以这样做：  
            //     canvasElement.height = 300; // 设置为你需要的高度值  
            // }
            var option;
            const updateFrequency = 2000;
            const dimension = 0;
            var time = 0;
            const countryColors = {
                Australia: '#00008b',
                Canada: '#f00',
                Germany: '#003897',
                // Iceland: '#003897',
                // India: '#f93',
                // Japan: '#bc002d',
                // 'North Korea': '#024fa2',
                // 'South Korea': '#000',
                // 'New Zealand': '#00247d',
                // Norway: '#ef2b2d',
                // Poland: '#dc143c',
                // Russia: '#d52b1e',
                // Turkey: '#e30a17',
                // 'United Kingdom': '#00247d',
                // 'United States': '#b22234'
            };
            const data = that.onlineNumList; //显示数据

            let startIndex = 0;
            let startYear = 1;
            option = {
                backgroundColor: "#0d1944",
                title: {
                    text: '在线人数',
                    textStyle: { // 标题样式  
                        color: '#1cacd3', // 标题颜色  
                        fontStyle: 'normal', // 标题字体风格，如 'normal', 'italic', 'oblique'  
                        fontWeight: 'bold', // 标题字体粗细，如 'normal', 'bold', 'bolder', 'lighter', 100, 200, ..., 900  
                        fontSize: 20, // 标题字体大小  
                        fontFamily: 'sans-serif', // 标题字体族名  
                        lineHeight: 30, // 行高  
                        backgroundColor: 'rgba(0,0,0,0)', // 标题背景色，默认透明  
                        borderColor: 'transparent', // 标题边框颜色  
                        borderWidth: 0, // 标题边框线宽  
                        borderRadius: 0, // 标题边框圆角  
                        padding: [10, 0, 0, 0], // 标题内边距，单位px，默认各方向内边距为0，为数组时分别对应上右下左边距  
                        shadowColor: 'transparent', // 文字阴影颜色  
                        shadowBlur: 0, // 文字阴影模糊大小  
                        shadowOffsetX: 0, // 文字阴影水平偏移  
                        shadowOffsetY: 0 // 文字阴影垂直偏移  
                        // 还有其他可能的 CSS 样式属性，如 'textDecoration', 'textShadow' 等，但 ECharts 可能不会支持所有属性  
                    }
                },
                grid: {
                    top: 50,
                    bottom: 30,
                    left: 130,
                    right: 80,
                },

                xAxis: {
                    max: 'dataMax',
                    axisLabel: {
                        formatter: function (n) {
                            return Math.round(n) + '';
                        }
                    }
                },
                dataset: {
                    source: data.slice(1).filter(function (d) {
                        return d[2] === startYear;
                    })
                },
                yAxis: {
                    type: 'category',
                    inverse: true,
                    max: 10,
                    axisLabel: {
                        show: true,
                        fontSize: 14,
                        formatter: function (value) {
                            // return value + '{flag|' + that.getFlag(flags, value) + '}';
                            return value
                        },
                        rich: {
                            flag: {
                                fontSize: 25,
                                padding: 5
                            }
                        }
                    },
                    animationDuration: 300,
                    animationDurationUpdate: 300
                },
                series: [

                    {

                        realtimeSort: true,
                        seriesLayoutBy: 'column',
                        type: 'bar',
                        itemStyle: {
                            color: function (param) {
                                return countryColors[param.value[3]] || '#5470c6';
                            }
                        },
                        encode: {
                            x: dimension,
                            y: 3
                        },
                        label: {
                            show: true,
                            precision: 1,
                            position: 'right',
                            valueAnimation: true,
                            fontFamily: 'monospace'
                        }
                    }
                ],
                // Disable init animation.
                animationDuration: 0,
                animationDurationUpdate: updateFrequency,
                animationEasing: 'linear',
                animationEasingUpdate: 'linear',
                graphic: {
                    elements: [
                        {
                            type: 'text',
                            right: 160,
                            bottom: 60,
                            style: {
                                // text: startYear,
                                font: 'bolder 80px monospace',
                                fill: 'rgba(100, 100, 100, 0.25)'
                            },
                            z: 100
                        }
                    ]
                },

            };
            // console.log(option);
            myChart.setOption(option);
            setInterval(function () {
                startIndex = startIndex + 1;
                onlineNum().then(res => {
                    // console.log(res, res.data.time.substring(11,19),"sldfjsdklfjsdlfjsdklj")
                    var time = res.data.time.substring(11, 13); //时间
                    if (time == "12:00:00") {
                        updateRedisData().then(res => {
                            console.log(that.getNowTime(4), "12:00:00清缓存")
                        })
                    }
                    if (time == "13:00:00") { //调用所有的echars接口
                        that.postALLs();
                    }
                    var dataArr = [];
                    for (var i in res.data.data) {
                        var iarr = [];
                        iarr.push([res.data.data[i].num, res.data.data[i].tenantName, startIndex])
                        dataArr.push(iarr[0])
                    }
                    var titleArr = [
                        "Income",
                        "Country",
                        "Year"
                    ];
                    this.onlineNumList = [
                        titleArr, // 标题行  
                        ...dataArr // 展开b中的数组，作为数据行  
                    ];
                    let source = this.onlineNumList.slice(1).filter(function (d) {
                        return d[2] === startIndex;
                    });
                    option.series[0].data = source;
                    // option.graphic.elements[0].style.text = startIndex;  //显示每秒显示的数字
                    myChart.setOption(option);
                })
            }, updateFrequency);

            window.addEventListener("resize", function () {
                myChart.resize();//myecharts换成相应的函数就可以了
            });

            // var divcanvas = canvasElement.querySelector("canvas");
            // console.log(canvasElement,divcanvas)
            // divcanvas.style.width=500+"px"
        },

        //库房管理数据展示
        storeRoomNumber() {
            var that = this;
            var chartDom = document.getElementById('storeRoomNumber');
            var myChart = echarts.init(chartDom);
            var option;
            const data = that.storeRoomNumList;
            option = {
                backgroundColor: "#0d1944",
                title: {
                    text: '库房管理数据展示',
                    textStyle: { // 标题样式  
                        color: '#1cacd3', // 标题颜色  
                        fontStyle: 'normal', // 标题字体风格，如 'normal', 'italic', 'oblique'  
                        fontWeight: 'bold', // 标题字体粗细，如 'normal', 'bold', 'bolder', 'lighter', 100, 200, ..., 900  
                        fontSize: 20, // 标题字体大小  
                        fontFamily: 'sans-serif', // 标题字体族名  
                        lineHeight: 30, // 行高  
                        backgroundColor: 'rgba(0,0,0,0)', // 标题背景色，默认透明  
                        borderColor: 'transparent', // 标题边框颜色  
                        borderWidth: 0, // 标题边框线宽  
                        borderRadius: 0, // 标题边框圆角  
                        padding: [10, 0, 0, 0], // 标题内边距，单位px，默认各方向内边距为0，为数组时分别对应上右下左边距  
                        shadowColor: 'transparent', // 文字阴影颜色  
                        shadowBlur: 0, // 文字阴影模糊大小  
                        shadowOffsetX: 0, // 文字阴影水平偏移  
                        shadowOffsetY: 0 // 文字阴影垂直偏移  
                        // 还有其他可能的 CSS 样式属性，如 'textDecoration', 'textShadow' 等，但 ECharts 可能不会支持所有属性  
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    type: 'scroll',
                    orient: 'horizontal',
                    right: 30,
                    top: 50,
                    bottom: 20,
                    data: data.legendData,
                    textStyle: { // 标题样式  
                        color: '#1cacd3', // 标题颜色  
                    }
                },
                series: [
                    {
                        top: 60,
                        name: 'Access From',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            // borderColor: '#fff',
                            // borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 40,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: data.seriesData
                    }
                ]
            };

            option && myChart.setOption(option);
        },

        //档案数字化统计展示
        information() {
            var that = this;
            var chartDom = document.getElementById('information');
            var myChart = echarts.init(chartDom, 'dark');
            var option;
            const rawData = that.informationNumList.rowData;
            const totalData = [];
            for (let i = 0; i < rawData[0].length; ++i) {
                let sum = 0;
                for (let j = 0; j < rawData.length; ++j) {
                    sum += rawData[j][i];
                }
                totalData.push(sum);
            }
            const grid = {
                left: 30,
                right: 30,
                top: 70,
                bottom: 40
            };
            const xAxis = that.informationNumList.xAxisArr;
            const series = [
                '数字化',
                '未数字化',
            ].map((name, sid) => {
                return {

                    name,
                    type: 'bar',
                    stack: 'total',
                    barWidth: '60%',
                    label: {
                        show: true,
                        formatter: (params) => Math.round(params.value * 1000) / 10 + '%',


                        position: "center",

                    },
                    data: rawData[sid].map((d, did) =>
                        totalData[did] <= 0 ? 0 : d / totalData[did]
                    )
                };
            });
            option = {
                backgroundColor: "#0d1944",
                title: {
                    text: '档案数字化统计展示',
                    textStyle: { // 标题样式  
                        color: '#1cacd3', // 标题颜色  
                        fontStyle: 'normal', // 标题字体风格，如 'normal', 'italic', 'oblique'  
                        fontWeight: 'bold', // 标题字体粗细，如 'normal', 'bold', 'bolder', 'lighter', 100, 200, ..., 900  
                        fontSize: 15, // 标题字体大小  
                        fontFamily: 'sans-serif', // 标题字体族名  
                        lineHeight: 30, // 行高  
                        backgroundColor: 'rgba(0,0,0,0)', // 标题背景色，默认透明  
                        borderColor: 'transparent', // 标题边框颜色  
                        borderWidth: 0, // 标题边框线宽  
                        borderRadius: 0, // 标题边框圆角  
                        padding: [10, 0, 0, 0], // 标题内边距，单位px，默认各方向内边距为0，为数组时分别对应上右下左边距  
                        shadowColor: 'transparent', // 文字阴影颜色  
                        shadowBlur: 0, // 文字阴影模糊大小  
                        shadowOffsetX: 0, // 文字阴影水平偏移  
                        shadowOffsetY: 0, // 文字阴影垂直偏移  
                        // width:"100%"
                        // 还有其他可能的 CSS 样式属性，如 'textDecoration', 'textShadow' 等，但 ECharts 可能不会支持所有属性  
                    }
                },
                // legend: {
                //     selectedMode: false
                // },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {

                    // right: 30,
                    top: 35,
                    // bottom: 20,
                    selectedMode: false,
                    textStyle: { // 标题样式  
                        color: '#1cacd3', // 标题颜色  
                    }
                },
                grid,
                yAxis: {
                    type: 'value'
                },
                xAxis: {
                    type: 'category',
                    data: xAxis,
                    axisLabel: {
                        interval: 0,
                        rotate: 10
                    },
                },
                series,
                dataZoom: {
                    type: 'slider', // 滑动条类型
                    show: xAxis.length > 7 ? true : false, // 是否显示滑动条,在这里可以根据自己的需求做判断，超过时显示进度条
                    startValue: 0, // 展示区域内容的起始数值
                    endValue: 6, // 展示区域内容的结束数值
                    height: 10, // 滑动条组件高度
                    bottom: 5, // 距离图表区域下边的距离
                    showDetail: false, // 拖拽时是否显示详情
                    showDataShadow: false, // 是否在组件中显示数据阴影
                    fillerColor: 'rgb(28, 172, 211,0.3)', // 平移条的填充颜色  
                    borderColor: 'transparent', // 边框颜色
                    zoomLock: true, // 锁定视图
                    brushSelect: false, // 不可缩放 滑动条默认是有手柄可以进行展示的内容区域缩放的，不太美观
                    // 通过该属性可以只滑动，不显示缩放功能
                    handleStyle: {
                        // 手柄样式
                        opacity: 0
                    }
                },
            };

            option && myChart.setOption(option);
        },

        //7月青海交控利用情况统计
        statistics() {
            var that = this;
            var chartDom = document.getElementById('statistics');
            var myChart = echarts.init(chartDom);
            var option;
            // console.log(that.utilizingStatisticsNumList, "shuju")





            var dataMap = {};
            // // prettier-ignore 综合系统
            dataMap.dataPI = that.dataFormatter(that.utilizingStatisticsNumList.zhxtData, that.utilizingStatisticsNumList.tenantName);
            // // prettier-ignore 电子预览室
            dataMap.dataSI = that.dataFormatter(that.utilizingStatisticsNumList.dzylsData, that.utilizingStatisticsNumList.tenantName);
            // // prettier-ignore 利用平台
            dataMap.dataTI = that.dataFormatter(that.utilizingStatisticsNumList.lyptData, that.utilizingStatisticsNumList.tenantName);
            var dataArr = [];
            for (var i in that.utilizingStatisticsNumList.lyptData) {
                dataArr.push({
                    title: {
                        text: i + "年利用情况统计展示",
                        textStyle: { // 标题样式  
                            color: '#1cacd3', // 标题颜色  
                            fontStyle: 'normal', // 标题字体风格，如 'normal', 'italic', 'oblique'  
                            fontWeight: 'bold', // 标题字体粗细，如 'normal', 'bold', 'bolder', 'lighter', 100, 200, ..., 900  
                            fontSize: 20, // 标题字体大小  
                            fontFamily: 'sans-serif', // 标题字体族名  
                            lineHeight: 30, // 行高  
                            backgroundColor: 'rgba(0,0,0,0)', // 标题背景色，默认透明  
                            borderColor: 'transparent', // 标题边框颜色  
                            borderWidth: 0, // 标题边框线宽  
                            borderRadius: 0, // 标题边框圆角  
                            padding: [10, 0, 0, 0], // 标题内边距，单位px，默认各方向内边距为0，为数组时分别对应上右下左边距  
                            shadowColor: 'transparent', // 文字阴影颜色  
                            shadowBlur: 0, // 文字阴影模糊大小  
                            shadowOffsetX: 0, // 文字阴影水平偏移  
                            shadowOffsetY: 0 // 文字阴影垂直偏移  
                            // 还有其他可能的 CSS 样式属性，如 'textDecoration', 'textShadow' 等，但 ECharts 可能不会支持所有属性  
                        }
                    },
                    dataZoom: {
                        type: 'slider', // 滑动条类型
                        show: that.utilizingStatisticsNumList.tenantName.length > 7 ? true : false, // 是否显示滑动条,在这里可以根据自己的需求做判断，超过时显示进度条
                        startValue: 0, // 展示区域内容的起始数值
                        endValue: 6, // 展示区域内容的结束数值
                        height: 10, // 滑动条组件高度
                        bottom: 5, // 距离图表区域下边的距离
                        showDetail: false, // 拖拽时是否显示详情
                        showDataShadow: false, // 是否在组件中显示数据阴影
                        fillerColor: 'rgb(28, 172, 211,0.3)', // 平移条的填充颜色  
                        borderColor: 'transparent', // 边框颜色
                        zoomLock: true, // 锁定视图
                        brushSelect: false, // 不可缩放 滑动条默认是有手柄可以进行展示的内容区域缩放的，不太美观
                        // 通过该属性可以只滑动，不显示缩放功能
                        handleStyle: {
                            // 手柄样式
                            opacity: 0
                        }
                    },
                    series: [
                        { data: dataMap.dataPI[i] },
                        { data: dataMap.dataSI[i] },
                        { data: dataMap.dataTI[i] },
                        {
                            data: [
                                { name: '综合系统', value: dataMap.dataPI[i + 'sum'] },
                                { name: '电子预览室', value: dataMap.dataSI[i + 'sum'] },
                                { name: '利用平台', value: dataMap.dataTI[i + 'sum'] }
                            ]
                        }
                    ]
                })
            }

            option = {
                baseOption: {
                    timeline: {
                        axisType: 'category',
                        // realtime: false,
                        // loop: false,
                        autoPlay: true,
                        // currentIndex: 2,
                        playInterval: 1000,
                        // controlStyle: {
                        //     position: 'left'
                        // },
                        data: that.dataList,
                        label: {
                            formatter: function (s) {

                                return s
                            }
                        }
                    },
                    backgroundColor: "#0d1944",
                    title: {
                        // subtext: '数据来自国家统计局'
                    },
                    tooltip: {},
                    legend: {
                        // left: 'right',
                        top: "10%",
                        data: ['综合系统', '电子预览室', '利用平台'],
                        textStyle: { // 标题样式  
                            color: '#1cacd3', // 标题颜色  

                        },

                    },
                    calculable: true,
                    grid: {
                        top: 80,
                        bottom: 80,
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow',
                                label: {
                                    show: true,
                                    formatter: function (params) {
                                        return params.value.replace('\n', '');
                                    }
                                }
                            }
                        }
                    },
                    xAxis: [
                        {
                            type: 'category',
                            axisLabel: {
                                interval: 0,
                                rotate: 10
                            },
                            data: that.utilizingStatisticsNumList.tenantName,
                            splitLine: { show: false },

                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            // name: 'GDP（亿元）'
                        }
                    ],

                    series: [
                        { name: '综合系统', type: 'bar' },
                        { name: '电子预览室', type: 'bar' },
                        { name: '利用平台', type: 'bar' },
                        {
                            // name: 'GDP占比',
                            type: 'pie',
                            center: ['75%', '35%'],
                            radius: '28%',
                            z: 100
                        },

                    ]
                },
                options: dataArr,


            };

            option && myChart.setOption(option);
        },

        //档案情况展示
        stockNums() {
            var that = this;
            var chartDom = document.getElementById('stockNums');
            var myChart = echarts.init(chartDom);
            var option;
            var app = {};
            const posList = [
                'left',
                'right',
                'top',
                'bottom',
                'inside',
                'insideTop',
                'insideLeft',
                'insideRight',
                'insideBottom',
                'insideTopLeft',
                'insideTopRight',
                'insideBottomLeft',
                'insideBottomRight'
            ];
            app.configParameters = {
                rotate: {
                    min: -90,
                    max: 90
                },
                align: {
                    options: {
                        left: 'left',
                        center: 'center',
                        right: 'right'
                    }
                },
                verticalAlign: {
                    options: {
                        top: 'top',
                        middle: 'middle',
                        bottom: 'bottom'
                    }
                },
                position: {
                    options: posList.reduce(function (map, pos) {
                        map[pos] = pos;
                        return map;
                    }, {})
                },
                distance: {
                    min: 0,
                    max: 100
                }
            };
            app.config = {
                rotate: 90,
                align: 'left',
                verticalAlign: 'middle',
                position: 'insideBottom',
                distance: 15,
                onChange: function () {
                    const labelOption = {
                        rotate: app.config.rotate,
                        align: app.config.align,
                        verticalAlign: app.config.verticalAlign,
                        position: app.config.position,
                        distance: app.config.distance
                    };
                    myChart.setOption({
                        series: [
                            {
                                label: labelOption
                            },
                            {
                                label: labelOption
                            }
                        ]
                    });
                }
            };
            const labelOption = {
                show: true,
                position: app.config.position,
                distance: app.config.distance,
                align: app.config.align,
                verticalAlign: app.config.verticalAlign,
                rotate: app.config.rotate,
                formatter: '{c}  {name|{a}}',
                fontSize: 16,
                rich: {
                    name: {}
                }
            };
            option = {
                backgroundColor: "#0d1944",
                title: {
                    text: '档案数字化统计展示',
                    textStyle: { // 标题样式  
                        color: '#1cacd3', // 标题颜色  
                        fontStyle: 'normal', // 标题字体风格，如 'normal', 'italic', 'oblique'  
                        fontWeight: 'bold', // 标题字体粗细，如 'normal', 'bold', 'bolder', 'lighter', 100, 200, ..., 900  
                        fontSize: 20, // 标题字体大小  
                        fontFamily: 'sans-serif', // 标题字体族名  
                        lineHeight: 30, // 行高  
                        backgroundColor: 'rgba(0,0,0,0)', // 标题背景色，默认透明  
                        borderColor: 'transparent', // 标题边框颜色  
                        borderWidth: 0, // 标题边框线宽  
                        borderRadius: 0, // 标题边框圆角  
                        padding: [10, 0, 0, 0], // 标题内边距，单位px，默认各方向内边距为0，为数组时分别对应上右下左边距  
                        shadowColor: 'transparent', // 文字阴影颜色  
                        shadowBlur: 0, // 文字阴影模糊大小  
                        shadowOffsetX: 0, // 文字阴影水平偏移  
                        shadowOffsetY: 0, // 文字阴影垂直偏移  
                        // width:"100%"
                        // 还有其他可能的 CSS 样式属性，如 'textDecoration', 'textShadow' 等，但 ECharts 可能不会支持所有属性  
                    }
                },
                grid: {
                    top: 100,
                    // bottom: 30,
                    // left: 130,
                    // right: 80,
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['卷总数', '件总数'],
                    // right: 30,
                    top: 50,
                    bottom: 20,
                    textStyle: { // 标题样式  
                        color: '#1cacd3', // 标题颜色  
                    }
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        mark: { show: true },
                        // dataView: { show: true, readOnly: false },
                        // magicType: { show: true, type: ['line', 'bar', 'stack'] },
                        // restore: { show: true },
                        // saveAsImage: { show: true }
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: { show: false },
                        data: that.stockNumsList.xAxis,
                        axisLabel: {
                            interval: 0,
                            rotate: 10
                        },
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                dataZoom: {
                    type: 'slider', // 滑动条类型
                    show: that.stockNumsList.xAxis.length > 7 ? true : false, // 是否显示滑动条,在这里可以根据自己的需求做判断，超过时显示进度条
                    startValue: 0, // 展示区域内容的起始数值
                    endValue: 6, // 展示区域内容的结束数值
                    height: 10, // 滑动条组件高度
                    bottom: 5, // 距离图表区域下边的距离
                    showDetail: false, // 拖拽时是否显示详情
                    showDataShadow: false, // 是否在组件中显示数据阴影
                    fillerColor: 'rgb(28, 172, 211,0.3)', // 平移条的填充颜色  
                    borderColor: 'transparent', // 边框颜色
                    zoomLock: true, // 锁定视图
                    brushSelect: false, // 不可缩放 滑动条默认是有手柄可以进行展示的内容区域缩放的，不太美观
                    // 通过该属性可以只滑动，不显示缩放功能
                    handleStyle: {
                        // 手柄样式
                        opacity: 0
                    }
                },
                series: [
                    {
                        name: '卷总数',
                        type: 'bar',
                        barGap: 0,
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: that.stockNumsList.juanNums
                    },
                    {
                        name: '件总数',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: that.stockNumsList.jianNums
                    },

                ]
            };
            option && myChart.setOption(option);
        },

        dataFormatter(obj, tenantName) {
            // console.log(obj,"skldfjsdklfjsdklfjsdkljfkl")
            var temp;
            var dataArr
            for (var j in obj) {
                var max = 0;
                var sum = 0;
                temp = obj[j];
                for (var i = 0, l = temp.length; i < l; i++) {
                    max = Math.max(max, temp[i]);
                    sum += temp[i];
                    obj[j][i] = {
                        name: tenantName[i],
                        value: temp[i]
                    };
                }
                obj[j + 'max'] = Math.floor(max / 100) * 100;
                obj[j + 'sum'] = sum;
            }
            return obj;
        },

        //档案移交接收数据统计展示
        dayj() {
            var that = this;
            var chartDom = document.getElementById('dayj');
            var myChart = echarts.init(chartDom);
            var option;
            const builderJson = {
                all: 10887,
                charts: that.dayjList.charts,
                components: that.dayjList.components,
                ie: 9743
            };
            const downloadJson = that.dayjList.downloadJson;
            const themeJson = that.dayjList.themeJson;
            option = {
                backgroundColor: "#0d1944",
                tooltip: {},
                title: [
                    {
                        text: '档案移交接收数据统计展示',
                        textStyle: { // 标题样式  
                            color: '#1cacd3', // 标题颜色  
                            fontStyle: 'normal', // 标题字体风格，如 'normal', 'italic', 'oblique'  
                            fontWeight: 'bold', // 标题字体粗细，如 'normal', 'bold', 'bolder', 'lighter', 100, 200, ..., 900  
                            fontSize: 20, // 标题字体大小  
                            fontFamily: 'sans-serif', // 标题字体族名  
                            lineHeight: 30, // 行高  
                            backgroundColor: 'rgba(0,0,0,0)', // 标题背景色，默认透明  
                            borderColor: 'transparent', // 标题边框颜色  
                            borderWidth: 0, // 标题边框线宽  
                            borderRadius: 0, // 标题边框圆角  
                            padding: [10, 0, 0, 0], // 标题内边距，单位px，默认各方向内边距为0，为数组时分别对应上右下左边距  
                            shadowColor: 'transparent', // 文字阴影颜色  
                            shadowBlur: 0, // 文字阴影模糊大小  
                            shadowOffsetX: 0, // 文字阴影水平偏移  
                            shadowOffsetY: 0 // 文字阴影垂直偏移  
                            // 还有其他可能的 CSS 样式属性，如 'textDecoration', 'textShadow' 等，但 ECharts 可能不会支持所有属性  
                        }
                    },
                    {
                        text: '移交接收数据',
                        subtext: '总计 ' + builderJson.all,
                        left: '25%',
                        top: '10%',
                        textAlign: 'center',
                        textStyle: { // 标题样式  
                            color: '#1cacd3', // 标题颜色   
                            fontSize: 14, // 标题字体大小  
                        }
                    },
                    {
                        text: '移交总数量',
                        subtext:
                            '总计 ' +
                            Object.keys(downloadJson).reduce(function (all, key) {
                                return all + downloadJson[key];
                            }, 0),
                        left: '75%',
                        top: '10%',
                        textAlign: 'center',
                        textStyle: { // 标题样式  
                            color: '#1cacd3', // 标题颜色   
                            fontSize: 14, // 标题字体大小  
                        }
                    },
                    {
                        text: '接收总数量',
                        subtext:
                            '总计 ' +
                            Object.keys(themeJson).reduce(function (all, key) {
                                return all + themeJson[key];
                            }, 0),
                        left: '75%',
                        top: '55%',
                        textAlign: 'center',
                        textStyle: { // 标题样式  
                            color: '#1cacd3', // 标题颜色   
                            fontSize: 14, // 标题字体大小  
                        }
                    }
                ],
                grid: [
                    {
                        top: 90,
                        width: '50%',
                        bottom: '40%',
                        left: 10,
                        containLabel: true
                    },
                    {
                        top: '63%',
                        width: '50%',
                        bottom: 0,
                        left: 10,
                        containLabel: true
                    }
                ],
                xAxis: [
                    {
                        type: 'value',
                        max: builderJson.all,
                        splitLine: {
                            show: false
                        }
                    },
                    {
                        type: 'value',
                        max: builderJson.all,
                        gridIndex: 1,
                        splitLine: {
                            show: false
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'category',
                        data: Object.keys(builderJson.charts),
                        axisLabel: {
                            interval: 0,
                            rotate: 30
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    {
                        gridIndex: 1,
                        type: 'category',
                        data: Object.keys(builderJson.components),
                        axisLabel: {
                            interval: 0,
                            rotate: 30
                        },
                        splitLine: {
                            show: false
                        }
                    }
                ],
                series: [

                    {

                        type: 'bar',
                        stack: 'chart',
                        z: 3,
                        label: {
                            position: 'right',
                            show: true
                        },
                        data: Object.keys(builderJson.charts).map(function (key) {
                            return builderJson.charts[key];
                        })
                    },
                    {
                        type: 'bar',
                        stack: 'chart',
                        silent: true,
                        itemStyle: {
                            color: '#eee'
                        },
                        data: Object.keys(builderJson.charts).map(function (key) {
                            return builderJson.all - builderJson.charts[key];
                        })
                    },
                    {
                        type: 'bar',
                        stack: 'component',
                        xAxisIndex: 1,
                        yAxisIndex: 1,
                        z: 3,
                        label: {
                            position: 'right',
                            show: true
                        },
                        data: Object.keys(builderJson.components).map(function (key) {
                            return builderJson.components[key];
                        })
                    },
                    {
                        type: 'bar',
                        stack: 'component',
                        silent: true,
                        xAxisIndex: 1,
                        yAxisIndex: 1,
                        itemStyle: {
                            color: '#eee'
                        },
                        data: Object.keys(builderJson.components).map(function (key) {
                            return builderJson.all - builderJson.components[key];
                        })
                    },
                    {
                        type: 'pie',
                        radius: [0, '25%'],
                        center: ['75%', '35%'],
                        data: Object.keys(downloadJson).map(function (key) {
                            return {
                                name: key.replace('.js', ''),
                                value: downloadJson[key]
                            };
                        })
                    },
                    {
                        type: 'pie',
                        radius: [0, '25%'],
                        center: ['75%', '75%'],
                        data: Object.keys(themeJson).map(function (key) {
                            return {
                                name: key.replace('.js', ''),
                                value: themeJson[key]
                            };
                        })
                    }
                ]
            };

            option && myChart.setOption(option);

        },
        //电子档案归档统计
        gdtj() {
            var that = this;
            var chartDom = document.getElementById('gdtj');
            var myChart = echarts.init(chartDom);
            var option;


            setTimeout(function () {
                option = {
                    backgroundColor: "#0d1944",
                    title: {
                        text: '电子档案归档统计',
                        textStyle: { // 标题样式  
                            color: '#1cacd3', // 标题颜色  
                            fontStyle: 'normal', // 标题字体风格，如 'normal', 'italic', 'oblique'  
                            fontWeight: 'bold', // 标题字体粗细，如 'normal', 'bold', 'bolder', 'lighter', 100, 200, ..., 900  
                            fontSize: 20, // 标题字体大小  
                            fontFamily: 'sans-serif', // 标题字体族名  
                            lineHeight: 30, // 行高  
                            backgroundColor: 'rgba(0,0,0,0)', // 标题背景色，默认透明  
                            borderColor: 'transparent', // 标题边框颜色  
                            borderWidth: 0, // 标题边框线宽  
                            borderRadius: 0, // 标题边框圆角  
                            padding: [10, 0, 0, 0], // 标题内边距，单位px，默认各方向内边距为0，为数组时分别对应上右下左边距  
                            shadowColor: 'transparent', // 文字阴影颜色  
                            shadowBlur: 0, // 文字阴影模糊大小  
                            shadowOffsetX: 0, // 文字阴影水平偏移  
                            shadowOffsetY: 0 // 文字阴影垂直偏移  
                            // 还有其他可能的 CSS 样式属性，如 'textDecoration', 'textShadow' 等，但 ECharts 可能不会支持所有属性  
                        }
                    },
                    legend: {

                        type: 'scroll',
                        orient: 'horizontal',
                        right: 20,
                        // left:20
                        top: 40,
                        // bottom: 20,
                        data: that.archiveFileNumsList.names,
                        textStyle: { // 标题样式  
                            color: '#1cacd3', // 标题颜色  
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        showContent: false,

                    },
                    dataset: {
                        source: that.archiveFileNumsList.datas
                    },
                    xAxis: { type: 'category' },
                    yAxis: { gridIndex: 0 },
                    grid: { top: '60%', bottom: "6%" },
                    series: that.archiveFileNumsList.series
                };
                myChart.on('updateAxisPointer', function (event) {
                    const xAxisInfo = event.axesInfo[0];
                    if (xAxisInfo) {
                        const dimension = xAxisInfo.value + 1;
                        myChart.setOption({
                            series: {
                                id: 'pie',
                                label: {
                                    formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                                },
                                encode: {
                                    value: dimension,
                                    tooltip: dimension
                                }
                            }
                        });
                    }
                });
                myChart.setOption(option);
            });

            option && myChart.setOption(option);

        },


    }
}
</script>
<style rel="stylesheet/scss" lang="scss">
body {
    background-color: hsla(227, 67%, 16%, 1.00);
}

.content {
    width: 100%;
    height: 100%;
    // background-image: url("../assets/images/tenant.png");

    // background-repeat: no-repeat;
    // background-size: 100% 100%;
    // overflow: hidden;
    // position: relative;
}

.bg-purple-dark {
    background-image: url("../assets/images/bg-purple-dark.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    min-height: 130px;
    width: 100%;
    margin: 0 auto;
    line-height: 130px;
    text-align: center;
    font-size: 35px;
    color: #1cacd3;
    font-weight: bold;
    letter-spacing: 5px;
}

.grid-content {
    box-sizing: border-box;
    border: 2px solid red;
    border-image: url("../assets/images/border.png") 51 38 21 101;
    border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
    // position: relative;
    margin-bottom: 0.833rem;
    // margin: 0;
    width: 100%;
}

.main-onlineNumber {
    // background: red;
    position: relative;
    height: 320px;
    // width: 100%;

}

.main-storeRoomNumber {
    // background: red;
    position: relative;
    height: 300px;
}

.main-Archive {
    position: relative;
    height: 550px;
    background-color: rgba(255, 255, 255, 0.05);
}

.main-information {
    position: relative;
    height: 280px;
    // background: red;
}

.main-statistics {
    position: relative;
    height: 340px;
    // background: red;
}


.main-dayj,
.main-gdtj,
.main-stockNums {
    position: relative;
    height: 420px;
    // background: red;
}

.main-dayj-conter,
.main-gdtj-conter,
.main-stockNums-conter {
    position: absolute;
    top: -27px;
    left: -76px;
    // background: #fff;
}

.main-statistics-conter {
    position: absolute;
    top: -27px;
    left: -76px;
}

.main-onlineNumber-conter {
    position: absolute;
    top: -27px;
    // background: #fff;
    left: -76px;
}

.main-storeRoomNumber-conter {
    position: absolute;
    top: -27px;
    // background: #fff;
    left: -76px;
}

.main-information-conter {
    position: absolute;
    top: -27px;
    left: -76px;
}


.main-statistics-conter .el-input--medium .el-input__inner {
    line-height: 26px;
    height: 26px;
    width: 120px;
    background: rgb(28, 172, 211, 0.3);
    color: rgb(255, 255, 255, 0.6);

}

.main-statistics-conter .el-input--medium .el-input__icon {
    line-height: 26px;
    height: 26px;
}
.main-Archive div{
    background: url(../assets/images/jsc.png) no-repeat;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
}
.main-Archive div img{
    width: 207px;
    height: 235px;
}
</style>


